<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Game1</title>
    <style type="text/css">
    .container{
        width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .container .status{
        text-align: center;
        line-height: 1.5em;
        padding: 10px 0;
    }
    .container .txt{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container .txt input{
        width: 200px;
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        padding: 0;
        line-height: 36px;
    }
    .container .txt button{
        background: lightcoral;
        color: #fff;
        font-size: 14px;
        border: none;
        margin: 0;
        padding: 10px;
        border-radius: 5px;
        margin-left: 10px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="status" id="msg">正在连接...</div>
        <div id="content"></div>
        <div class="txt">
            <input type="text" id="val" name="val"/>
            <button id="btn">发送</button>
        </div>
    </div>
    <script type="text/javascript">
    function $(selector){return document.querySelector(selector);}
    var msg = $("#msg");
    var content = $("#content");
    var txt = $("#val");

    function getNowFormatDate(){
        var date = new Date();
        var d = date.getDate();
        var y = date.getFullYear();
        var m = date.getMonth();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        return `${y}-${m>=10?m:("0"+m)}-${d} ${h}:${m}:${s}`;
    }

    if(window.WebSocket){
        var ws = new WebSocket("ws://127.0.0.1:8001");
        console.log("开始建立websocket连接：");
        console.log(+new Date());

        ws.onopen = function(e){
            console.log("连接已建立:");
            console.log(+new Date());
            console.log(e);
            msg.innerHTML = "连接服务器成功";
            ws.send("game1");
        }

        //客户端收到服务端数据触发
        ws.onmessage = function(e){
            console.log("onmessage");
            console.log(e);
            if(e.data=="success"){
                msg.innerHTML = "连接成功";
            }else{
                msg.innerHTML += getNowFormatDate()+"<br/>"+e.data+"<br/>";
            }
        }

        ws.onclose = function(e){
            console.log("连接中断:") 
            console.log(e);
        }

        ws.onerror = function(e){
            console.log("连接出错:") 
            console.log(e);
        }

        $("#btn").addEventListener("click", function(e){
            if(!txt.value){
                console.log("请输入要发送的数据");
                return;
            }
            ws.send("game1:"+txt.value);
            txt.value = "";
        })
    }
    </script>
</body>
</html>